<template>
  <div class="product-detail-page">
    <NavBar />
    
    <!-- 返回按钮 -->
    <div class="container mx-auto px-4 py-6">
      <button @click="goBack" class="flex items-center text-gray-600 hover:text-blue-600 transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        返回
      </button>
    </div>

    <!-- 产品主要内容 -->
    <div class="container mx-auto px-4 pb-16" v-if="product">
      <!-- 图片和基本信息 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-12 mb-8 md:mb-16">
        <!-- 左边：产品图片 -->
        <div class="product-images">
          <!-- 主图 -->
          <div class="main-image mb-6 md:mb-12 rounded-lg overflow-hidden bg-gray-50 flex items-center justify-center">
            <img 
              :src="currentImage" 
              :alt="product.name"
              class="w-full max-h-64 md:max-h-96 object-contain"
            />
          </div>
          
          <!-- 缩略图 -->
          <div class="thumbnail-list flex gap-2 md:gap-3 overflow-x-auto pb-2 -mx-4 px-4 md:mx-0 md:px-0">
            <div 
              v-for="(img, index) in productImages" 
              :key="index"
              @click="currentImage = img"
              class="thumbnail-item flex-shrink-0 cursor-pointer border-2 rounded-lg overflow-hidden bg-gray-50 flex items-center justify-center transition-all touch-manipulation"
              :class="{ 'border-blue-600': currentImage === img, 'border-gray-200': currentImage !== img }"
            >
              <img :src="img" :alt="`产品图片${index + 1}`" class="w-16 h-16 md:w-20 md:h-20 object-contain" />
            </div>
          </div>
        </div>

        <!-- 右边：产品信息 -->
        <div class="product-info">
          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-3 md:mb-4">{{ product.name }}</h1>
          
          <!-- 规格 -->
          <div class="specs mb-4 md:mb-6">
            <h3 class="text-base md:text-lg font-semibold text-gray-800 mb-2 md:mb-3">产品规格</h3>
            <div class="spec-tags flex flex-wrap gap-2">
              <span 
                v-for="spec in product.specs" 
                :key="spec"
                class="px-2 md:px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs md:text-sm"
              >
                {{ spec }}
              </span>
            </div>
          </div>

          <!-- 简要介绍 -->
          <div class="summary mb-6 md:mb-8">
            <h3 class="text-base md:text-lg font-semibold text-gray-800 mb-2 md:mb-3">产品简介</h3>
            <p class="text-gray-600 leading-relaxed text-sm md:text-base">{{ product.description }}</p>
          </div>

          <!-- 咨询部分 -->
          <div class="contact-section bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 md:p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">咨询方式</h3>
            
            <!-- 电话咨询 -->
            <div class="contact-item mb-4">
              <div class="flex items-center mb-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span class="text-gray-700 font-medium">联系电话</span>
              </div>
              <a 
                href="tel:19928872570" 
                class="text-xl font-bold text-blue-600 hover:text-blue-800 transition-colors"
              >
                19928872570
              </a>
            </div>

            <!-- 微信二维码 -->
            <div class="contact-item">
              <div class="flex items-center mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600 mr-2" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-2.677-3.238-4.74-6.001-4.74zM5.785 5.991c.642 0 1.162.529 1.162 1.18 0 .653-.52 1.182-1.162 1.182-.642 0-1.162-.529-1.162-1.182 0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18 0 .653-.52 1.182-1.162 1.182-.642 0-1.162-.529-1.162-1.182 0-.651.52-1.18 1.162-1.18zm-1.007 6.926c-2.097-.105-4.185-.648-5.933-1.909a7.88 7.88 0 0 1-2.343-2.894c.346.993 1.068 1.916 2.017 2.59 1.892 1.061 4.26 1.541 6.268 1.593l-.01.022a8.167 8.167 0 0 1-.005-.056zm1.391.883c.012.098.018.198.018.301 0 .615-.08 1.21-.22 1.782-.058.236.032.476.226.672a.776.776 0 0 0 .667.234c1.815-.198 3.646-.772 5.399-1.668 1.343-.697 2.544-1.459 3.61-2.293-.797-.47-1.68-.853-2.64-1.128l-.135-.029c-.41-.084-.766.204-.767.629-.002.453.384.768.783.948l.08.034c.63.277 1.228.603 1.788.967a13.14 13.14 0 0 1-2.822 2.464 14.003 14.003 0 0 1-3.04 1.55.704.704 0 0 1-.658-.039.742.742 0 0 1-.298-.458 12.214 12.214 0 0 1-.23-2.454v-.1c-.002-.508-.368-1.057-.775-1.245a6.213 6.213 0 0 0-1.677-.478 7.488 7.488 0 0 0-1.827-.008l-.003.004z"/>
                </svg>
                <span class="text-gray-700 font-medium text-sm md:text-base">微信咨询</span>
              </div>
              <div class="flex flex-col md:flex-row items-center md:items-start gap-3 md:gap-4">
                <img 
                  src="@/assets/wacht/二维码.png" 
                  alt="微信二维码"
                  class="w-24 h-24 md:w-32 md:h-32 border-2 border-white rounded-lg shadow-md"
                />
                <div class="text-center md:text-left">
                  <p class="text-xs md:text-sm text-gray-600">扫一扫</p>
                  <p class="text-xs md:text-sm text-gray-600">添加微信咨询</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 产品详细描述 -->
      <div class="product-description bg-white rounded-xl shadow-sm p-4 md:p-8">
        <h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-4 md:mb-6">产品详细介绍</h2>
        <div class="prose max-w-none">
          <div class="description-content" v-html="product.detailedDescription"></div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import Footer from '@/components/Footer.vue'
import { getImagePaths } from '@/utils/imageMap'

const route = useRoute()
const router = useRouter()
const currentImage = ref('')

// 返回上一页
const goBack = () => {
  router.back()
}

// 模拟产品数据
const products = [
  
  {
    id: 2,
    name: 'HT-401（塑料专用型）',
    categoryId: 2,
    categoryName: '瞬干胶',
    description: 'HT-401是一款单组分的瞬干/快干胶，通过聚合反应形成高分子聚合物，赋予胶水独特的粘合性质。常见规格有20g、1000g包装，特殊情况可按客户要求定制规格。',
    features: ['单组分', '瞬干固化', '塑料专用', '规格多样'],
    specs: ['型号: 401', '外观: 透明液体', '规格: 乙基', '粘度: 30-50 CPS', '接着速度: 中', '填补间隙: 0.108mm', '剪切强度: 220 kgf/cm²', '比重: 1.05', '适用温度: -50~80℃', '完全固化时间: 24H'],
    images: ['/401-1.jpg', '/401-2.jpg', '/401-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>固化速度快：</strong>这是最显著的特点之一，通常在几秒钟到几分钟内即可达到足够的强度，大大缩短了等待时间，提高了工作效率。</li>
        <li><strong>粘结强度高：</strong>对多种材料，如塑料、橡胶等都有良好的粘结能力，能够牢牢地固定各种材料。</li>
        <li><strong>单组份：</strong>无需添加混合剂或者固化剂，使用方便，将胶水涂在待粘结的表面上即可。</li>
        <li><strong>透明性好：</strong>不会影响被粘结物体的外观。</li>
        <li><strong>耐湿性和耐化学性：</strong>有一定的耐湿性和耐化学性，能够在潮湿或有化学物质的环境下保持较好的粘结性能。</li>
      </ul>
      
      <h3>应用领域</h3>
      <ul>
        <li><strong>工业生产：</strong>在制造业中，可用于塑料、橡胶零部件的快速装配、固定和修补，如电子设备、汽车、机械等行业。</li>
        <li><strong>日常生活：</strong>可用于家庭物品的修补，如粘鞋、粘塑料制品、修补玩具等。</li>
        <li><strong>医疗领域：</strong>在医疗设备也有应用，例如：用于塑料器件的修复和固定、粘合等。</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>大量使用时应注意工作场所的通风条件，以免吸入刺激性气体。</li>
        <li>避免佩戴编织手套使用快干胶，因为胶水会被手套吸收并引发聚合反应，可能造成伤害。</li>
        <li>如果不慎将胶水溅入眼中，应避免揉搓，而是用大量清水冲洗或用温热毛巾热敷，让眼皮自然分开。若情况严重，应及时就医。</li>
      </ol>
    `
  },
  {
    id: 9,
    name: 'HT-403（塑料专用型）',
    categoryId: 2,
    categoryName: '瞬干胶',
    description: 'HT-403是一款单组分的瞬干/快干胶，作为晶鸿泰塑料胶水的401升级款配方，提升了胶水粘合强度和粘结范围。常见规格有20g、1000g包装，特殊情况可按客户要求定制规格。',
    features: ['单组分', '瞬干固化', '塑料专用', '升级配方'],
    specs: ['型号: 403', '外观: 透明液体', '规格: 乙基', '粘度: 50-100 CPS', '接着速度: 中', '填补间隙: 0.108mm', '剪切强度: 220 kgf/cm²', '比重: 1.05', '适用温度: -50~80℃', '完全固化时间: 24H'],
    images: ['/403-1.jpg', '/403-2.jpg', '/403-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>固化速度快：</strong>这是最显著的特点之一，通常在几秒钟到几分钟内即可达到足够的强度，大大缩短了等待时间，提高了工作效率。</li>
        <li><strong>粘结强度高：</strong>对多种材料，如塑料、橡胶等都有良好的粘结能力，能够牢牢地固定各种材料。</li>
        <li><strong>单组份：</strong>无需添加混合剂或者固化剂，使用方便，将胶水涂在待粘结的表面上即可。</li>
        <li><strong>透明性好：</strong>不会影响被粘结物体的外观。</li>
        <li><strong>耐湿性和耐化学性：</strong>有一定的耐湿性和耐化学性，能够在潮湿或有化学物质的环境下保持较好的粘结性能。</li>
      </ul>
      
      <h3>应用领域</h3>
      <ul>
        <li><strong>工业生产：</strong>在制造业中，可用于塑料、橡胶零部件的快速装配、固定和修补，如电子设备、汽车、机械等行业。</li>
        <li><strong>日常生活：</strong>可用于家庭物品的修补，如粘鞋、粘塑料制品、修补玩具等。</li>
        <li><strong>医疗领域：</strong>在医疗设备也有应用，例如：用于塑料器件的修复和固定、粘合等。</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>大量使用时应注意工作场所的通风条件，以免吸入刺激性气体。</li>
        <li>避免佩戴编织手套使用快干胶，因为胶水会被手套吸收并引发聚合反应，可能造成伤害。</li>
        <li>如果不慎将胶水溅入眼中，应避免揉搓，而是用大量清水冲洗或用温热毛巾热敷，让眼皮自然分开。若情况严重，应及时就医。</li>
      </ol>
    `
  },
  {
    id: 10,
    name: 'HT-406（塑料专用型）',
    categoryId: 2,
    categoryName: '瞬干胶',
    description: 'HT-406是一款单组分的瞬干/快干胶，为了配合市场需求，增强了胶水黏度指数和粘合强度，但仍保留了塑料性胶水的优越性。常见规格有20g、1000g包装，特殊情况可按客户要求定制规格。',
    features: ['单组分', '瞬干固化', '塑料专用', '高粘度'],
    specs: ['型号: 406', '外观: 透明液体', '规格: 乙基', '粘度: 95-110 CPS', '接着速度: 中', '填补间隙: 0.130mm', '剪切强度: 220 kgf/cm²', '比重: 1.08', '适用温度: -50~80℃', '完全固化时间: 24H'],
    images: ['/406-1.jpg', '/406-2.jpg', '/406-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>固化速度快：</strong>这是最显著的特点之一，通常在几秒钟到几分钟内即可达到足够的强度，大大缩短了等待时间，提高了工作效率。</li>
        <li><strong>粘结强度高：</strong>对多种材料，如塑料、橡胶等都有良好的粘结能力，能够牢牢地固定各种材料。</li>
        <li><strong>单组份：</strong>无需添加混合剂或者固化剂，使用方便，将胶水涂在待粘结的表面上即可。</li>
        <li><strong>透明性好：</strong>不会影响被粘结物体的外观。</li>
        <li><strong>耐湿性和耐化学性：</strong>有一定的耐湿性和耐化学性，能够在潮湿或有化学物质的环境下保持较好的粘结性能。</li>
      </ul>
      
      <h3>应用领域</h3>
      <ul>
        <li><strong>工业生产：</strong>在制造业中，可用于塑料、橡胶零部件的快速装配、固定和修补，如电子设备、汽车、机械等行业。</li>
        <li><strong>日常生活：</strong>可用于家庭物品的修补，如粘鞋、粘塑料制品、修补玩具等。</li>
        <li><strong>医疗领域：</strong>在医疗设备也有应用，例如：用于塑料器件的修复和固定、粘合等。</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>大量使用时应注意工作场所的通风条件，以免吸入刺激性气体。</li>
        <li>避免佩戴编织手套使用快干胶，因为胶水会被手套吸收并引发聚合反应，可能造成伤害。</li>
        <li>如果不慎将胶水溅入眼中，应避免揉搓，而是用大量清水冲洗或用温热毛巾热敷，让眼皮自然分开。若情况严重，应及时就医。</li>
      </ol>
    `
  },
  {
    id: 11,
    name: 'HT-618（塑料专用型）',
    categoryId: 2,
    categoryName: '瞬干胶',
    description: 'HT-618是一款单组分的瞬干/快干胶，本胶水提升了塑料和金属间的粘合强度，在塑料粘结领域更使用范围更广。常见规格有20g、1000g包装，特殊情况可按客户要求定制规格。',
    features: ['单组分', '瞬干固化', '塑料专用', '塑料金属粘合'],
    specs: ['型号: 618', '外观: 透明液体', '规格: 乙基', '粘度: 50-75 CPS', '接着速度: 中', '填补间隙: 0.150mm', '剪切强度: 220 kgf/cm²', '比重: 1.08', '适用温度: -50~80℃', '完全固化时间: 24H'],
    images: ['/618-1.jpg', '/618-2.jpg', '/618-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>固化速度快：</strong>这是最显著的特点之一，通常在几秒钟到几分钟内即可达到足够的强度，大大缩短了等待时间，提高了工作效率。</li>
        <li><strong>粘结强度高：</strong>对多种材料，如塑料、橡胶、塑料和金属粘合等都有良好的粘结能力，能够牢牢地固定各种材料。</li>
        <li><strong>单组份：</strong>无需添加混合剂或者固化剂，使用方便，将胶水涂在待粘结的表面上即可。</li>
        <li><strong>透明性好：</strong>不会影响被粘结物体的外观。</li>
        <li><strong>耐湿性和耐化学性：</strong>有一定的耐湿性和耐化学性，能够在潮湿或有化学物质的环境下保持较好的粘结性能。</li>
      </ul>
      
      <h3>应用领域</h3>
      <ul>
        <li><strong>工业生产：</strong>在制造业中，可用于塑料、橡胶零部件的快速装配、固定和修补，如电子设备、汽车、机械等行业。</li>
        <li><strong>日常生活：</strong>可用于家庭物品的修补，如粘鞋、粘塑料制品、修补玩具等。</li>
        <li><strong>医疗领域：</strong>在医疗设备也有应用，例如：用于塑料器件的修复和固定、粘合等。</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>大量使用时应注意工作场所的通风条件，以免吸入刺激性气体。</li>
        <li>避免佩戴编织手套使用快干胶，因为胶水会被手套吸收并引发聚合反应，可能造成伤害。</li>
        <li>如果不慎将胶水溅入眼中，应避免揉搓，而是用大量清水冲洗或用温热毛巾热敷，让眼皮自然分开。若情况严重，应及时就医。</li>
      </ol>
    `
  },
  {
    id: 13,
    name: 'HT-703（金属专用型）',
    categoryId: 2,
    categoryName: '瞬干胶',
    description: 'HT-703是一款单组分的瞬干/快干胶，作为晶鸿泰701胶水升级版，在各种金属粘合时赋予了更佳的剪切强度。常见规格有20g、1000g包装，特殊情况可按客户要求定制规格。',
    features: ['单组分', '瞬干固化', '金属专用', '升级版'],
    specs: ['型号: 703', '外观: 透明液体', '规格: 甲基', '粘度: 95-110 CPS', '接着速度: 中', '填补间隙: 0.1528mm', '剪切强度: 220 kgf/cm²', '比重: 1.08', '适用温度: -50~80℃', '完全固化时间: 24H'],
    images: ['/703-1.jpg', '/703-2.jpg', '/703-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>固化速度快：</strong>这是最显著的特点之一，通常在几秒钟到几分钟内即可达到足够的强度，大大缩短了等待时间，提高了工作效率。</li>
        <li><strong>粘结强度高：</strong>对多种金属材料，如金属、磁铁、铜制品粘合等都有良好的粘结能力，能够牢牢地固定各种材料。</li>
        <li><strong>单组份：</strong>无需添加混合剂或者固化剂，使用方便，将胶水涂在待粘结的表面上即可。</li>
        <li><strong>透明性好：</strong>不会影响被粘结物体的外观。</li>
        <li><strong>耐湿性和耐化学性：</strong>有一定的耐湿性和耐化学性，能够在潮湿或有化学物质的环境下保持较好的粘结性能。</li>
      </ul>
      
      <h3>应用领域</h3>
      <ul>
        <li><strong>工业生产：</strong>在制造业中，可用于金属、仿金属零部件的快速装配、固定和修补，如电子设备、汽车、机械等行业。</li>
        <li><strong>日常生活：</strong>可用于家庭物品的修补，如金属家用品等。</li>
        <li><strong>医疗领域：</strong>在医疗设备也有应用，例如：用于金属器件的固定、粘合等。</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>大量使用时应注意工作场所的通风条件，以免吸入刺激性气体。</li>
        <li>避免佩戴编织手套使用快干胶，因为胶水会被手套吸收并引发聚合反应，可能造成伤害。</li>
        <li>如果不慎将胶水溅入眼中，应避免揉搓，而是用大量清水冲洗或用温热毛巾热敷，让眼皮自然分开。若情况严重，应及时就医。</li>
      </ol>
    `
  },
  {
    id: 14,
    name: 'HT-718（金属专用型）',
    categoryId: 2,
    categoryName: '瞬干胶',
    description: 'HT-718是一款单组分的瞬干/快干胶，为了满足市场要求，降低胶水流动性，特意制造的相对高粘度胶水，适用于光滑面施胶，产品剪切强度大。常见规格有20g、1000g包装，特殊情况可按客户要求定制规格。',
    features: ['单组分', '瞬干固化', '金属专用', '高粘度'],
    specs: ['型号: 718', '外观: 透明液体', '规格: 甲基', '粘度: 200-300 CPS', '接着速度: 中', '填补间隙: 0.1725mm', '剪切强度: 220 kgf/cm²', '比重: 1.08', '适用温度: -50~80℃', '完全固化时间: 24H'],
    images: ['/718.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>固化速度快：</strong>这是最显著的特点之一，通常在几秒钟到几分钟内即可达到足够的强度，大大缩短了等待时间，提高了工作效率。</li>
        <li><strong>粘结强度高：</strong>对多种金属材料，如金属、磁铁、铜制品粘合等都有良好的粘结能力，能够牢牢地固定各种材料。</li>
        <li><strong>单组份：</strong>无需添加混合剂或者固化剂，使用方便，将胶水涂在待粘结的表面上即可。</li>
        <li><strong>透明性好：</strong>不会影响被粘结物体的外观。</li>
        <li><strong>耐湿性和耐化学性：</strong>有一定的耐湿性和耐化学性，能够在潮湿或有化学物质的环境下保持较好的粘结性能。</li>
      </ul>
      
      <h3>应用领域</h3>
      <ul>
        <li><strong>工业生产：</strong>在制造业中，可用于金属、仿金属零部件的快速装配、固定和修补，如电子设备、汽车、机械等行业。</li>
        <li><strong>日常生活：</strong>可用于家庭物品的修补，如金属家用品等。</li>
        <li><strong>医疗领域：</strong>在医疗设备也有应用，例如：用于金属器件的固定、粘合等。</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>大量使用时应注意工作场所的通风条件，以免吸入刺激性气体。</li>
        <li>避免佩戴编织手套使用快干胶，因为胶水会被手套吸收并引发聚合反应，可能造成伤害。</li>
        <li>如果不慎将胶水溅入眼中，应避免揉搓，而是用大量清水冲洗或用温热毛巾热敷，让眼皮自然分开。若情况严重，应及时就医。</li>
      </ol>
    `
  },
  {
    id: 16,
    name: 'HT-776（低白化专用型）',
    categoryId: 2,
    categoryName: '瞬干胶',
    description: 'HT-776是一款单组分的瞬干/快干胶，白化程度小、流动性佳，完全固化后粘合强度可达180kgf/cm²，适用于粘结质量要求高的产品。',
    features: ['低白化', '流动性佳', '单组分', '高可靠性'],
    specs: ['型号: 776', '外观: 透明液体', '规格: 甲氧基乙酯', '粘度: 50-70 CPS', '接着速度: 中', '填补间隙: 0.152mm', '剪切强度: 180 kgf/cm²', '比重: 1.05', '适用温度: -50~80℃', '完全固化时间: 24H'],
    images: ['/776-1.jpg', '/776-2.jpg', '/776-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>固化速度快：</strong>几秒至几分钟达到足够强度，显著提升效率。</li>
        <li><strong>粘结强度高：</strong>适用于塑料、金属、磁铁、铜件等多种材料。</li>
        <li><strong>单组份：</strong>无需配比，开盖即用，施工便捷。</li>
        <li><strong>透明性好：</strong>不影响外观效果。</li>
        <li><strong>耐湿与耐化学性：</strong>在潮湿/化学环境中保持良好性能。</li>
      </ul>
      
      <h3>应用领域</h3>
      <ul>
        <li><strong>工业生产：</strong>金属、仿金属、塑料、硅橡胶部件装配/固定/修补。</li>
        <li><strong>日常生活：</strong>塑料、硅橡胶、金属家用品等修补。</li>
        <li><strong>医疗领域：</strong>用于塑料、硅橡胶、金属器件的固定与粘合。</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>大量使用时保持良好通风，避免吸入刺激性气体。</li>
        <li>避免佩戴编织手套使用，以免吸收胶水引发聚合反应造成伤害。</li>
        <li>若不慎溅入眼睛，勿揉搓，立即大量清水冲洗或热敷，严重者及时就医。</li>
      </ol>
    `
  },
  {
    id: 17,
    name: 'HT-779（低白化专用型）',
    categoryId: 2,
    categoryName: '瞬干胶',
    description: 'HT-779是一款单组分的瞬干/快干胶，白化效果更低，具有高黏度与高粘合强度，适用于粘结质量要求高、流动性较缓的产品。',
    features: ['低白化', '高黏度', '单组分', '高强度'],
    specs: ['型号: 779', '外观: 透明液体', '规格: 甲氧基乙酯', '粘度: 350-5300 CPS', '接着速度: 中', '填补间隙: 0.152mm', '剪切强度: 180 kgf/cm²', '比重: 1.05', '适用温度: -50~80℃', '完全固化时间: 24H'],
    images: ['/779-1.jpg', '/779-2.jpg', '/779-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>固化速度快：</strong>几秒至几分钟达到足够强度，提高装配效率。</li>
        <li><strong>粘结强度高：</strong>适用于塑料、金属、磁铁、铜制品等多材料粘合。</li>
        <li><strong>单组份：</strong>无需配比，操作便捷。</li>
        <li><strong>透明外观：</strong>不影响制品外观。</li>
        <li><strong>耐湿与耐化学性：</strong>潮湿/化学环境下仍保持较好性能。</li>
      </ul>
      
      <h3>应用领域</h3>
      <ul>
        <li><strong>工业生产：</strong>金属、仿金属、塑料、硅橡胶部件装配/固定/修补。</li>
        <li><strong>日常生活：</strong>塑料、硅橡胶、金属家用品等修补。</li>
        <li><strong>医疗领域：</strong>用于塑料、硅橡胶、金属器件的固定与粘合。</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>大量使用时保持良好通风，避免吸入刺激性气体。</li>
        <li>避免佩戴编织手套使用，以免吸收胶水引发聚合反应。</li>
        <li>若不慎溅入眼睛，勿揉搓，立即清水冲洗或热敷，严重者就医。</li>
      </ol>
    `
  },
  {
    id: 18,
    name: 'HT-168Q硅胶胶水',
    categoryId: 1,
    categoryName: 'RTV有机硅胶',
    description: 'HT-168Q是一款单组分的有机硅胶胶水，具备优越的密封性能、耐高温、高湿，符合食品级环保要求；多用于医疗、航空航天、瓷器等粘结。',
    features: ['密封性好', '耐高温高湿', '食品级', '单组分'],
    specs: ['型号: 168Q', '外观: 透明/半透明/白/黑', '表干时间: 12~15min/15min（视型号）', '温度范围: -65~200℃（高温型至310℃）', '包装: 120ml，可定制'],
    images: ['/168q-1.jpg', '/168q-2.jpg', '/168q-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>粘结强度高：</strong>适用于塑料、金属、硅胶等多材质。</li>
        <li><strong>单组分易用：</strong>无需配比，点涂后即可装配。</li>
        <li><strong>密封性好：</strong>具备良好防水密封性能。</li>
        <li><strong>耐湿耐化：</strong>潮湿/化学环境下性能稳定。</li>
      </ul>
      
      <h3>应用领域</h3>
      <ul>
        <li><strong>家具维修：</strong>硅胶厨具、家用品修补。</li>
        <li><strong>工业应用：</strong>电子、汽车、机械等；如硅胶密封圈、手环、文胸、套、管、医疗配件等。</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>避免接触眼睛和皮肤，误触请大量清水冲洗并就医。</li>
        <li>置于儿童触及不到处保存。</li>
        <li>阴凉干燥通风保存；挤出后建议3分钟内贴合。</li>
      </ol>
    `
  },
  {
    id: 19,
    name: 'HT-168JQ硅胶胶水',
    categoryId: 1,
    categoryName: 'RTV有机硅胶',
    description: 'HT-168JQ是一款单组分的有机硅胶胶水，密封性好，符合食品级环保要求；多用于医疗、航空航天等粘结。',
    features: ['密封性好', '食品级环保', '单组分', '使用便捷'],
    specs: ['型号: 168JQ', '外观: 透明/白/黑', '表干时间: 12~15min', '温度范围: -65~200℃', '包装: 120ml'],
    images: ['/168jq-1.jpg', '/168jq-2.jpg', '/168jq-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>粘结强度高：</strong>适用于塑料、金属、硅胶等多种材料。</li>
        <li><strong>单组分：</strong>无需混合剂或固化剂，点涂即可粘结。</li>
        <li><strong>密封性好：</strong>具备良好防水密封效果。</li>
        <li><strong>耐湿耐化：</strong>在潮湿或化学环境下保持较好性能。</li>
      </ul>
      
      <h3>应用领域</h3>
      <ul>
        <li><strong>家具维修：</strong>适用于硅胶厨具、家具用品修补。</li>
        <li><strong>工业应用：</strong>电子、汽车、机械等，如硅胶密封圈、手环、文胸、套、管、医疗配件等。</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>避免接触眼睛和皮肤，误触请大量清水冲洗并就医。</li>
        <li>置于儿童无法触及处保存。</li>
        <li>阴凉干燥通风保存；挤出胶水建议3分钟内完成贴合。</li>
      </ol>
    `
  },
  {
    id: 4,
    name: 'HT-788F瞬间胶处理剂',
    categoryId: 4,
    categoryName: '表面处理剂',
    description: 'HT-768、788F、788、1068、770处理剂是一款单组份快速挥发性溶剂，是专门用于PP、硅橡胶、PVC 软塑胶、热塑性弹性体物体粘合用的表面处理剂。',
    features: ['密封性好', '食品级环保', '单组分', '使用便捷'],
    specs: ['型号: HT-788F', '外观: 透明', '表干时间: 1-5min', '温度范围: 无', '备注: PP、PVC软塑料、热塑性弹性体表面助粘剂（活化剂）'],
    images: ['/770f-1.jpg', '/770f-2.jpg', '/770f-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>经处理后能达到高强度的粘合力，与瞬间胶配套特别适合硅橡胶、热塑性弹性体与塑胶、金属粘接工艺及一般常用粘接工序作业</strong></li>
        <li><strong>优异的耐候性、良品高、无毒、性能良好。</strong></li>
      </ul>
      
      <h3>使用方法</h3>
      <ul>
        <li><strong>用涂抹、喷涂的方式均可，将处理剂涂于硅橡胶等待粘合部位，使其表面活化，待残留的处理剂溶剂挥发后（约 5 分钟）即可配合瞬间胶粘接。</li>
       
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>仅供工业用，用者必须经过训练，并将此产品容器盖紧存放清凉、干爽及通风的地方，远离火源、电源。</li>
        <li>建议作业人员套上手套、口罩卒业，避免刺激皮肤及呼吸道，在使用时必须保持空气对流，避免长期吸入</li>
      </ol>
    `
  },
  {
    id: 20,
    name: 'HT-T770X贴双面胶处理剂',
    categoryId: 4,
    categoryName: '表面处理剂',
    description: 'HT-T770X专用硅橡胶\PU\PP\尼龙(尼龙加玻纤）表面处理剂，能有效改善硅橡胶材质的表面极性，大大提高粘接性能。',
    features: ['密封性好', '食品级环保', '单组分', '使用便捷'],
    specs: ['型号: HT-788F', '外观: 透明', '表干时间: 3-5min', '温度范围: 无', '备注: 硅胶粘合处理剂、硅胶贴双面胶处理剂、橡胶贴双面胶处理剂、TPU贴双面胶处理剂'],
    images: ['/T770X-1.jpg', '/T770X-2.jpg', '/T770X-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>处理后的硅橡胶\PU\PP\尼龙(尼龙加玻纤）可以用于硅橡胶 \PP\PU\尼龙(尼龙加玻纤）背双面胶</strong></li>
        <li><strong>同事处理后在硅橡胶\PU\PP\尼龙(尼龙加玻纤）上喷 漆、丝网印刷亦有良好效果。T770X 具有初粘力强、粘结强度大、使用方便等特点。</strong></li>
      </ul>
      
      <h3>使用方法</h3>
      <ul>
        <li><strong>1. 先除去被粘硅橡胶\PU\PP\尼龙(尼龙加玻纤）表面的油污及灰尘。</li>
        <li><strong>2. 在待粘硅橡胶\PU\PP\尼龙(尼龙加玻纤）表面均匀地喷涂或刷涂一层接着剂，露置溶剂完 全挥发（约需 3-5 分钟）。</li>
        <li><strong>3. 将压敏胶带撕去保护纸后紧贴于经处理的硅橡胶\PU\PP\尼龙(尼龙加玻纤）表面，并贴合 面压紧。</li>
        <li><strong>4. 压置 8 小时后，可具有较强的粘接力。24 小时后，粘接力达到最大强度的 70%左右；自 然存放时间越长，粘接效果跟佳。</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>本品含有有机溶剂，宜放于阴凉干燥处。须按易然规则储存，使用时注意通风及防止明 火接触。</li>
        <li>胶液用后，应随时盖好，以免溶剂挥发和潮气浸入。</li>
        <li>涂胶工具使用完毕，可浸入甲苯溶剂中清洗。 </li>
        <li>本品之有效储存保质期为一年，保质期后经检验合格，仍可继续使用。</li>
      </ol>
    `
  },
  {
    id: 5,
    name: 'HT-Primer7518热硫化粘结剂',
    categoryId: 5,
    categoryName: '热硫化胶水',
    description: 'HT- Primer 7518（silica gel）是单组份硅橡胶与适用于过氧化物型硅胶(硅胶啪啪手表带)与金属（不锈钢、铜、铝等）.电木、铁佛龙、尼龙、PET、ABS、PC、PVC、玻璃、塑料、PC+玻璃纤维的热硫化粘接。属高温固化型，固化后最终强度较高，胶膜柔韧、耐水、耐介质、耐老化。涂胶后，具有较长的可粘着时间。 ',
    features: ['固话强度高', '易涂胶施工', '安全无气味', '独家配方'],
    specs: ['型号: HT-Primer7518', '外观: 半透明液体', '表干时间: 15-30min', '温度范围: 100℃', '备注: 低温铂金硫化剂硅胶专用'],
    images: ['/7518-1.jpg', '/7518-2.jpg', '/7518-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>是一种反应型硅氧烷和有机硅树脂的异烷烃混合溶液，在常温或者加热的环境下暴露于 空气中，溶剂挥发后,形成一层硬硅胶薄膜,牢固的粘接在基材表面，</strong></li>
        <li><strong>便于金属与非金属材料之前的 粘接,提高结合力. 催化剂固化硅胶涂覆在其表面会牢固的粘接在其表面</strong></li>
      </ul>
      
      <h3>使用方法</h3>
      <ul>
        <li><strong>1、先以甲苯或酯类溶剂除去被粘表面的油污及灰尘（使用时请摇匀）</li>
        <li><strong>2、待溶剂挥发完后，在待粘金属表面均匀地涂刷一层胶粘剂。</li>
        <li><strong>3、露置至溶剂完全挥发后（25℃时约120分钟以上），或(16518 系列、718入烤箱100℃烘烤15～30分钟低温铂金硫化剂硅胶专用) 16519系列、618、718入烤箱75℃烘烤15～30 分钟（粘镀镍需要180℃靠 20-30 分钟），直至待粘表面之胶粘剂固化成膜。（如烘烤温度过低或传热不良，也可适当延长烘烤时间）</li>
        <li><strong>4、取出工件冷却至室温，将末硫化之硅橡胶与其贴合，，已涂胶的产品可放置3天。 </li>
        <li><strong>5、将贴合后的压紧件放入模型中热压成型，硫化温度在 200℃以内为宜。（粘接工艺因硅橡胶生胶原料所采用的硫化工艺不同而稍有差别）</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>本品最好于 25℃以下低温冷藏保存。</li>
        <li>本品含有机溶剂，须按易燃品规则贮运，使用时注意通风及防止明火接触。 </li>
        <li>胶液用后，应随时盖好，以免溶剂挥发。 </li>
        <li>涂胶工具可用油画笔，毛刷，刀具，木条等，使用完毕，可浸入甲苯或酯类溶 剂中清洗。</li>
        <li>本品之有效贮存保质期为六个月，保质期后经检验合格，仍可继续使用。</li>
      </ol>
    `
  },
  {
    id: 6,
    name: 'HT-770J解胶剂',
    categoryId: 6,
    categoryName: '工业解胶剂',
    description: 'HT-770J解胶剂是一种能够溶解或分解胶水、胶粘剂等粘性物质的化学制剂。它主要用于去除各种材料表面因胶水粘贴而残留的胶渍。',
    features: ['除油渍', '除残胶', '干净快速', '独家配方无气味'],
    specs: ['型号: HT-770J', '外观: 半透明液体', '表干时间: 15-30min', '温度范围: 100℃', '备注: 低温铂金硫化剂硅胶专用'],
    images: ['/770J-1.jpg', '/770J-2.jpg', '/770J-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>解胶剂通常包含有机溶剂，如丙酮、甲苯、二甲苯等。丙酮是一种良好的有机溶剂，它能够溶解许多有机物质，包括胶水成分。它具有挥发性强、溶解速度快的特点，
</strong></li>
       
      </ul>
      
      <h3>使用方法</h3>
      <ul>
        <li><strong>1.准备工作：在使用解胶剂之前，需要确保使用环境通风良好。可以打开窗户或使用通风设备，如排风扇等。同时，要准备好防护用品，如橡胶手套、护目镜和口罩，以保护皮肤、眼睛和呼吸道。</li>
        <li><strong>2.简单表面胶渍清除步骤：
①对于小面积、较薄的胶渍：将解胶剂适量地涂抹在胶渍上。可以使用棉签、软布或小刷子等工具进行涂抹。如果胶渍较顽固，可以再次涂抹解胶剂并重复上述步骤，直到胶渍完全清除。
②对于大面积、较厚的胶渍，可以将解胶剂倒入一个合适的容器中，然后用刷子均匀地刷在胶渍表面。确保胶渍完全被解胶剂浸润。可以使用塑料铲子等工具将软化的胶渍大块地清除，再用软布蘸取解胶剂擦拭残留的胶渍，直到表面干净整洁。</li>
      
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>本品最好于0-25℃以下低温冷藏保存。本品含有机溶剂，须按易燃品规则贮运，使用时注意通风及防止明火和暴晒接触。</li>
        <li>使用时，请佩戴好防护用具。用后，应随时盖好，以免溶剂挥发。 </li>
        <li>如果溅入眼睛，要立即用大量清水冲洗至少 15 分钟，并尽快就医。如果不慎吸入大量解胶剂挥发的气体，应立即转移到通风良好的地方，呼吸新鲜空气，若出现呼吸困难等症状，应立即就医。</li>
        <li>本品之有效贮存保质期为六个月，保质期后经检验合格，仍可继续使用。</li>
      </ol>
    `
  },
  {
    id: 21,
    name: 'HT-Primer618热硫化粘结剂',
    categoryId: 5,
    categoryName: '热硫化胶水',
    description: 'HT-Primer618热硫化粘结剂 是单组份硅橡胶与适用于过氧化物型硅胶(硅胶啪啪手表带)与金属（不锈钢、铜、铝等）.电木、铁佛龙、尼龙、PET、ABS、PC、PVC、玻璃、塑料、PC+玻璃纤维的热硫化粘接。属高温固化型，固化后最终强度较高，胶膜柔韧、耐水、耐介质、耐老化。涂胶后，具有较长的可粘着时间。 ',
    features: ['固话强度高', '易涂胶施工', '安全无气味', '独家配方'],
    specs: ['型号: HT-Primer7518', '外观: 半透明液体', '表干时间: 15-30min', '温度范围: 100℃', '备注: 低温铂金硫化剂硅胶专用'],
    images: ['/H618-1.jpg', '/H618-2.jpg', '/H618-3.jpg'],
    detailedDescription: `
      <h3>产品特点</h3>
      <ul>
        <li><strong>是一种反应型硅氧烷和有机硅树脂的异烷烃混合溶液，在常温或者加热的环境下暴露于 空气中，溶剂挥发后,形成一层硬硅胶薄膜,牢固的粘接在基材表面，</strong></li>
        <li><strong>便于金属与非金属材料之前的 粘接,提高结合力. 催化剂固化硅胶涂覆在其表面会牢固的粘接在其表面</strong></li>
      </ul>
      
      <h3>使用方法</h3>
      <ul>
        <li><strong>1、先以甲苯或酯类溶剂除去被粘表面的油污及灰尘（使用时请摇匀）</li>
        <li><strong>2、待溶剂挥发完后，在待粘金属表面均匀地涂刷一层胶粘剂。</li>
        <li><strong>3、露置至溶剂完全挥发后（25℃时约120分钟以上），或(16518 系列、718入烤箱100℃烘烤15～30分钟低温铂金硫化剂硅胶专用) 16519系列、618、718入烤箱75℃烘烤15～30 分钟（粘镀镍需要180℃靠 20-30 分钟），直至待粘表面之胶粘剂固化成膜。（如烘烤温度过低或传热不良，也可适当延长烘烤时间）</li>
        <li><strong>4、取出工件冷却至室温，将末硫化之硅橡胶与其贴合，，已涂胶的产品可放置3天。 </li>
        <li><strong>5、将贴合后的压紧件放入模型中热压成型，硫化温度在 200℃以内为宜。（粘接工艺因硅橡胶生胶原料所采用的硫化工艺不同而稍有差别）</li>
      </ul>
      
      <h3>注意事项</h3>
      <ol>
        <li>本品最好于 25℃以下低温冷藏保存。</li>
        <li>本品含有机溶剂，须按易燃品规则贮运，使用时注意通风及防止明火接触。 </li>
        <li>胶液用后，应随时盖好，以免溶剂挥发。 </li>
        <li>涂胶工具可用油画笔，毛刷，刀具，木条等，使用完毕，可浸入甲苯或酯类溶 剂中清洗。</li>
        <li>本品之有效贮存保质期为六个月，保质期后经检验合格，仍可继续使用。</li>
      </ol>
    `
  }
  // 可以添加更多产品...
]

const product = ref<any>(null)
const productImages = ref<string[]>([])

onMounted(() => {
  const productId = parseInt(route.params.id as string)
  product.value = products.find(p => p.id === productId)
  
  if (product.value && product.value.images) {
    // 使用产品数据中的图片，转换为实际导入的图片路径
    productImages.value = getImagePaths(product.value.images)
    currentImage.value = productImages.value[0]
    console.log('Product images:', productImages.value)
    console.log('Current image:', currentImage.value)
  }
})
</script>

<style scoped>
.product-detail-page {
  min-height: 100vh;
  background: #f9fafb;
}

.product-images {
  position: sticky;
  top: 100px;
}

.thumbnail-item {
  cursor: pointer;
  transition: all 0.3s;
}

.thumbnail-item:hover {
  transform: translateY(-2px);
}

.description-content {
  color: #374151;
  line-height: 1.8;
}

.description-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: #1f2937;
}

.description-content ul,
.description-content ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

.description-content li {
  margin: 0.5rem 0;
}
</style>

